<template>
  <q-dialog ref="dialog">
    <q-card class="login-card q-pa-lg col-6" flat bordered>
      <q-item>
        <q-item-section>
          <q-avatar icon="bluetooth"></q-avatar>
        </q-item-section>
        <q-item-section>
          LouiSns Login
        </q-item-section>
      </q-item>

      <q-separator />

      <q-card-section horizontal>
        <q-form
          @submit="onSubmit"
          class="q-gutter-md"
        >
          <q-input
            filled
            v-model="phone"
            label="Your Phone"
            hint="Name and surname"
            lazy-rules="true"
            :rules="[ val => val && val.length > 0 || 'Please type something']"
          />

          <q-input
            filled
            :type="isPwd ? 'password' : 'text'"
            v-model="pwd"
            label="Your Password"
            lazy-rules="true"
            :rules="[
          val => val !== null && val !== '' || 'Please type your password',
          val => val > 0 && val < 100 || 'Please type a real password'
        ]"
          >
            <template v-slot:append>
              <q-icon
                :name="isPwd ? 'visibility_off' : 'visibility'"
                class="cursor-pointer"
                @click="isPwd = !isPwd"
              />
            </template>
          </q-input>

          <q-btn label="Submit" type="submit" color="primary"/>
        </q-form>

        <q-separator vertical />

        <q-card-section>
          <q-list>
            <q-item>
              <a href="https://github.com/login/oauth/authorize?client_id=0d54865545c82d618625&redirect_uri=http://localhost:12345/oauth/github">
                <q-avatar icon="bluetooth"></q-avatar>
              </a>
            </q-item>
          </q-list>
        </q-card-section>

      </q-card-section>

    </q-card>

  </q-dialog>
</template>

<script>
export default {
  name: "Login",
  data () {
    return {
      phone: null,
      pwd: null,
      isPwd: true
    }
  },

  computed: {
  },

  methods: {
    dialog() {
      this.$refs.dialog.show()
    },
    onSubmit() {

    }
  }
}
</script>

<style scoped>

</style>
